<template>
    <el-container>

        <img src="/img/production.png" alt="" style="width: 100%; display: block; margin: 0 auto; object-fit: cover;">
        <!-- 顶部导航栏 -->
        <el-header class="header">

        </el-header>

        <!-- 主要内容 -->
        <el-main>
            <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="card">
                <!-- 声呐产品展示 -->
                <el-tab-pane label="声呐产品展示" name="sonar">
                    <div class="product-section">
                        <el-image src="/img/BA1.jpg" class="banner" style="max-height: 350px; object-fit: cover;" />
                        <h2>产品特点</h2>
                        <el-divider />
                        <ul>
                            <li>高精度水下目标探测</li>
                            <li>实时成像技术</li>
                            <li>轻便耐用设计</li>
                        </ul>
                        <h2>技术参数</h2>
                        <el-divider />
                        <el-table :data="sonarSpecs" style="width: 100%">
                            <el-table-column prop="name" label="参数" />
                            <el-table-column prop="value" label="数值" />
                        </el-table>
                        <h2>应用领域</h2>
                        <el-divider />
                        <el-tag type="success">海洋勘探</el-tag>
                        <el-tag type="info">水下考古</el-tag>
                        <el-tag type="warning">水库监测</el-tag>
                    </div>
                </el-tab-pane>

                <!-- 无人船产品展示 -->
                <el-tab-pane label="无人船产品展示" name="unmannedBoat">
                    <div class="product-section">
                        <el-carousel :interval="5000" type="card" height="300px">
                            <el-carousel-item v-for="(boat, index) in unmannedBoats" :key="index">
                                <h3>{{ boat.name }}</h3>
                                <el-image :src="boat.image" fit="cover" />
                            </el-carousel-item>
                        </el-carousel>

                        <!-- 这里是适配小屏幕的情况 -->
                        <!-- <el-carousel indicator-position="outside" height="500px" :interval="5000">
                            <el-carousel-item v-for="(boat, index) in unmannedBoats" :key="index">
                                <h3>{{ boat.name }}</h3>
                                <el-image :src="boat.image" fit="cover" />
                            </el-carousel-item>
                        </el-carousel> -->

                        <h2>功能与配置</h2>
                        <el-divider />
                        <el-collapse>
                            <el-collapse-item v-for="(boat, index) in unmannedBoats" :key="index" :title="boat.name">
                                <p>功能：{{ boat.features }}</p>
                                <p>配置：{{ boat.specs }}</p>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-tab-pane>

                <!-- 检测服务流程 -->
                <el-tab-pane label="检测服务流程" name="inspectionProcess">
                    <el-steps :active="activeStep" finish-status="success" class="steps">
                        <el-step v-for="(step, index) in serviceSteps" :key="index" :title="step.title" />
                    </el-steps>
                    <el-button type="primary" @click="preStep" :disabled="activeStep === 1">
                        上一步
                    </el-button>
                    <el-button type="primary" @click="nextStep" :disabled="activeStep === serviceSteps.length">
                        下一步
                    </el-button>

                    <!-- 下面是验证性的表单，比较草率 -->
                    <div class="dummy" style="height: 300px;"></div>
                </el-tab-pane>

                <!-- 定制化服务 -->
                <el-tab-pane label="定制化服务" name="customService">
                    <div class="product-section">
                        <h2>满足客户需求的服务</h2>
                        <el-divider />
                        <el-form :model="customForm" label-width="100px">
                            <el-form-item label="客户名称">
                                <el-input v-model="customForm.clientName" placeholder="请输入客户名称" />
                            </el-form-item>
                            <el-form-item label="服务类型">
                                <el-select v-model="customForm.serviceType" placeholder="请选择服务类型">
                                    <el-option label="声呐检测" value="sonar" />
                                    <el-option label="无人船巡航" value="unmannedBoat" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="特殊需求">
                                <el-input v-model="customForm.requirements" type="textarea" placeholder="请输入特殊需求" />
                            </el-form-item>
                            <el-button type="primary" @click="submitCustomForm">提交</el-button>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
const activeTab = ref('sonar');

const sonarSpecs = [
    { name: '工作频率', value: '200 kHz' },
    { name: '探测范围', value: '500 米' },
    { name: '分辨率', value: '1 cm' },
];

const unmannedBoats = [
    { name: '无人船 A 型', image: '/img/BA1.jpg', features: '长续航、高速巡航', specs: '电池容量 10kWh, 双推进器' },
    { name: '无人船 B 型', image: '/img/BA2.jpg', features: '模块化设计、全自动导航', specs: '太阳能供电, 三推进器' },
    { name: '无人船 C 型', image: '/img/BA3.jpg', features: '模块化设计、全自动导航', specs: '太阳能供电, 三推进器' },
];

const serviceSteps = [
    { title: '前期沟通' },
    { title: '现场检测' },
    { title: '数据处理' },
    { title: '报告出具' },
];

const activeStep = ref(1);
const nextStep = () => {
    if (activeStep.value < serviceSteps.length) {
        activeStep.value++;
    }
};
const preStep = () => {
    if (activeStep.value > 1) {
        activeStep.value--;
    }
}


const customForm = ref({
    clientName: '',
    serviceType: '',
    requirements: '',
});

const submitCustomForm = () => {
    alert(`表单已提交！客户：${customForm.value.clientName}`);
};


// 表单的验证效果



</script>

<style scoped>
.header {
    background-color:transparent;
    color: white;
    padding: 15px;
    text-align: center;
    height: 1px;
}

.product-section {
    padding: 20px;
}

.banner {
    width: 100%;
    margin-bottom: 20px;
}

.steps {
    margin: 20px 0;
}
</style>